<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Line Chart</h1>
        <p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
    </div>
    <app-demoActions github="chart/linechart"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Basic</h5>
        <p-chart type="line" [data]="basicData" [options]="basicOptions"></p-chart>
    </div>

    <div class="card">
        <h5>Multi Axis</h5>
        <p-chart type="line" [data]="multiAxisData" [options]="multiAxisOptions"></p-chart>
    </div>

    <div class="card">
        <h5>Line Styles</h5>
        <p-chart type="line" [data]="lineStylesData" [options]="basicOptions"></p-chart>
    </div>
</div>

<div class="content-section documentation">

    <p-tabView>
        <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/chart/linechart" class="btn-viewsource" target="_blank">
            <span>View on GitHub</span>
        </a>
        <p-tabPanel header="Source">
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="card"&gt;
    &lt;h5&gt;Basic&lt;/h5&gt;
    &lt;p-chart type="line" [data]="basicData" [options]="basicOptions"&gt;&lt;/p-chart&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Multi Axis&lt;/h5&gt;
    &lt;p-chart type="line" [data]="multiAxisData" [options]="multiAxisOptions"&gt;&lt;/p-chart&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Line Styles&lt;/h5&gt;
    &lt;p-chart type="line" [data]="lineStylesData" [options]="basicOptions"&gt;&lt;/p-chart&gt;
&lt;/div&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class LineChartDemo implements OnInit &#123;

    basicData: any;

    multiAxisData: any;

    multiAxisOptions: any;

    lineStylesData: any;

    basicOptions: any;

    subscription: Subscription;

    config: AppConfig;

    constructor(private messageService: MessageService, private configService: AppConfigService) &#123;&#125;

    ngOnInit() &#123;
        this.basicData = &#123;
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                &#123;
                    label: 'First Dataset',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    fill: false,
                    borderColor: '#42A5F5',
                    tension: .4
                &#125;,
                &#123;
                    label: 'Second Dataset',
                    data: [28, 48, 40, 19, 86, 27, 90],
                    fill: false,
                    borderColor: '#FFA726',
                    tension: .4
                &#125;
            ]
        &#125;;

        this.multiAxisData = &#123;
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [&#123;
                label: 'Dataset 1',
                fill: false,
                borderColor: '#42A5F5',
                yAxisID: 'y',
                tension: .4,
                data: [65, 59, 80, 81, 56, 55, 10]
            &#125;, &#123;
                label: 'Dataset 2',
                fill: false,
                borderColor: '#00bb7e',
                yAxisID: 'y1',
                tension: .4,
                data: [28, 48, 40, 19, 86, 27, 90]
            &#125;]
        &#125;;

        this.multiAxisOptions = &#123;
            stacked: false,
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#495057'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                y: &#123;
                    type: 'linear',
                    display: true,
                    position: 'left',
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                y1: &#123;
                    type: 'linear',
                    display: true,
                    position: 'right',
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        drawOnChartArea: false,
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;
        &#125;;

        this.lineStylesData = &#123;
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                &#123;
                    label: 'First Dataset',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    fill: false,
                    tension: .4,
                    borderColor: '#42A5F5'
                &#125;,
                &#123;
                    label: 'Second Dataset',
                    data: [28, 48, 40, 19, 86, 27, 90],
                    fill: false,
                    borderDash: [5, 5],
                    tension: .4,
                    borderColor: '#66BB6A'
                &#125;,
                &#123;
                    label: 'Third Dataset',
                    data: [12, 51, 62, 33, 21, 62, 45],
                    fill: true,
                    borderColor: '#FFA726',
                    tension: .4,
                    backgroundColor: 'rgba(255,167,38,0.2)'
                &#125;
            ]
        &#125;;

        this.config = this.configService.config;
        this.updateChartOptions();
        this.subscription = this.configService.configUpdate$.subscribe(config =&gt; &#123;
            this.config = config;
            this.updateChartOptions();
        &#125;);
    &#125;

    updateChartOptions() &#123;
        if (this.config.dark)
            this.applyDarkTheme();
        else
            this.applyLightTheme();
    &#125;

    applyLightTheme() &#123;
        this.basicOptions = &#123;
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#495057'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                y: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;
        &#125;;

        this.multiAxisOptions = &#123;
            stacked: false,
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#495057'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                y: &#123;
                    type: 'linear',
                    display: true,
                    position: 'left',
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                y1: &#123;
                    type: 'linear',
                    display: true,
                    position: 'right',
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        drawOnChartArea: false,
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;
        &#125;;
    &#125;

    applyDarkTheme() &#123;
        this.basicOptions = &#123;
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#ebedef'
                    &#125;,
                    grid: &#123;
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;,
                y: &#123;
                    ticks: &#123;
                        color: '#ebedef'
                    &#125;,
                    grid: &#123;
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;
            &#125;
        &#125;;

        this.multiAxisOptions = &#123;
            stacked: false,
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#ebedef'
                    &#125;,
                    grid: &#123;
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;,
                y: &#123;
                    type: 'linear',
                    display: true,
                    position: 'left',
                    ticks: &#123;
                        color: '#ebedef'
                    &#125;,
                    grid: &#123;
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;,
                y1: &#123;
                    type: 'linear',
                    display: true,
                    position: 'right',
                    ticks: &#123;
                        color: '#ebedef'
                    &#125;,
                    grid: &#123;
                        drawOnChartArea: false,
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;
            &#125;
        &#125;;
    &#125;
&#125;
</app-code>
        </p-tabPanel>
    </p-tabView>
</div>
